<template>
  <div class="position-bar">
    <span>您的位置：</span>

    <template v-for="i in listKey">
      <span
        class="it"
        :key="i"
        v-if="crumbs && crumbs[i] && crumbs[i].name"
        @click="goList(i, crumbs[i], crumbs)"
        >{{ crumbs[i].name }}</span
      >
    </template>

    <!-- <span class="it">{{ crumbs }}</span> -->
  </div>
</template>

<script setup>
import { gotoList } from "@/utils/action";
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";

const props = defineProps({
  crumbs: {
    type: Object,
    default: () => {},
  },
  type: {
    type: Number,
    default: () => {
      return 1;
    },
  },
  listKey: {
    type: Array,
    default: () => ["firstCrumb", "secondCrumb", "thirdCrumb", "fourthCrumb"],
  },
});

// const listKey = ref(["firstCrumb", "secondCrumb", "thirdCrumb", "fourthCrumb"]);

const router = useRouter();
const goList = (i, it, arr) => {
  const crumbs = props.crumbs;
  if (props.type == 1) {
    if(crumbs["firstCrumb"].id == "389" || "384"){
      if (i === "firstCrumb") {
        // gotoList(it.id + "_0_0_0_1", router);
      } else if (i === "secondCrumb") {
        console.log(router);
        gotoList(crumbs["firstCrumb"].id + "_" + it.id + "_0_1", router);
      } else if (i === "thirdCrumb") {
        gotoList(
          crumbs["firstCrumb"].id +
            "_" +
            crumbs["secondCrumb"].id +
            "_" +
            it.id +
            "_1",
          router
        );
      }
    }else{
      if (i === "firstCrumb") {
        // gotoList(it.id + "_0_0_0_1", router);
      } else if (i === "secondCrumb") {
        console.log(router);
        gotoList(crumbs["firstCrumb"].id + "_" + it.id + "_0_0_1", router);
      } else if (i === "thirdCrumb") {
        gotoList(
          crumbs["firstCrumb"].id +
            "_" +
            crumbs["secondCrumb"].id +
            "_" +
            it.id +
            "_0_1",
          router
        );
      } else if (i === "fourthCrumb") {
        gotoList(
          crumbs["firstCrumb"].id +
            "_" +
            crumbs["secondCrumb"].id +
            "_" +
            crumbs["thirdCrumb"].id +
            "_" +
            it.id +
            "_1",
          router
        );
      }

    }
  } else if (props.type == 2) {
    if (i === "secondCrumb") {
      const { href } = router.resolve({
        name: "information-list",
        params: {
          firstId: "386",
          secondId: arr["secondCrumb"].id,
          thirdId: arr["thirdCrumb"].id,
          param: `386_${arr["secondCrumb"].id}_${arr["thirdCrumb"].id}_1`,
          type: it.id,
        },
      });
      window.open(href, "_blank");
      // router.push({
      //   name: "information-list",
      //   params: {
      //     firstId: "386",
      //     secondId: arr["secondCrumb"].id,
      //     thirdId: arr["thirdCrumb"].id,
      //     param: `386_${arr["secondCrumb"].id}_${arr["thirdCrumb"].id}_1`,
      //     type: it.id,
      //   },
      // });
    }
  } else if (props.type == 3) {
    if (i === "secondCrumb") {
      const { href } = router.resolve({
        name: "information-list",
        params: {
          firstId: "386",
          secondId: arr["secondCrumb"].id,
          thirdId: arr["thirdCrumb"].id,
          param: `386_${arr["secondCrumb"].id}_${arr["thirdCrumb"].id}_1`,
          type: it.id,
        },
      });
      window.open(href, "_blank");
      // router.push({
      //   name: "information-list",
      //   params: {
      //     firstId: "386",
      //     secondId: arr["secondCrumb"].id,
      //     thirdId: arr["thirdCrumb"].id,
      //     param: `386_${arr["secondCrumb"].id}_${arr["thirdCrumb"].id}_1`,
      //     type: it.id,
      //   },
      // });
    } else if (i === "thirdCrumb") {
      const { href } = router.resolve({
        name: "information-list",
        params: {
          firstId: "386",
          secondId: arr["secondCrumb"].id,
          thirdId: arr["thirdCrumb"].id,
          param: `386_${arr["secondCrumb"].id}_${arr["thirdCrumb"].id}_1`,
          type: it.id,
        },
      });
      window.open(href, "_blank");
      // router.push({
      //   name: "information-list",
      //   params: {
      //     firstId: "386",
      //     secondId: arr["secondCrumb"].id,
      //     thirdId: arr["thirdCrumb"].id,
      //     param: `386_${arr["secondCrumb"].id}_${arr["thirdCrumb"].id}_1`,
      //     type: it.id,
      //   },
      // });
    }
  }

  console.log(i);
};
</script>

<style lang="less" scoped>
.position-bar {
  display: flex;
  font-size: 14px;
  font-weight: 400;
  color: #93999e;
  line-height: 14px;
  margin: 15px 0;

  .it {
    cursor: pointer;
  }
  .it::after {
    content: ">";
    margin: 0px 5px;
  }
  .it:last-child {
    cursor: auto;
  }
  .it:last-child::after {
    display: none;
  }
}
</style>
